<template>
  <div>

    <!-- el-dialog
第一个标签是弹框内的内容，第二个标签（插槽名必须交footer出现在底部）
title：弹窗左上角的标题
visible：控制弹框是否出现
before-close：关闭前的回调，会暂停Dialog的关闭 -->
    <!-- el-dialog组件内，当弹窗打开/关闭，回传和绑定布尔值给dialogVisible -->
    <!-- 解决方案：自己维护dialogVisible，不需要组件内回传给我 -->

    <!-- close-on-click-modal: 是否可以通过点击 modal 关闭 Dialog -->
    <!-- close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog -->
    <!-- show-close	是否显示关闭按钮 -->
    <!-- 知识点：
属性值默认是字符串（别看是false但是也是字符串会判定为真）
字符创里只有'''为假
知识点：加冒号和不加冒号的区别
假冒好后面的值就是表达式（常量和变量）
不加冒号后面的值就是字符创 -->
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form ref="deptForm" label-width="120px">
        <el-form-item label="部门名称">
          <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门负责人">
          <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
            <el-option
              v-for="item in employeeList"
              :key="item.id"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍">
          <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="enterFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 弹窗是否显示的布尔值
    dialogVisible: {
      type: Boolean,
      default: false

    },
    employeeList: {
      type: Array,
      default() {
        return []
      }
    }

  },
  data() {
    return {
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍

      }
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    cancelFn() { // 取消
    // 思路：关闭弹窗要把dialogVisible变量改为false形影el-dialog的vieible属性的值
    // 但是：此变量是props里接收定义的，不能直接修改，props制度，遵守单项数据流，考虑.$emit
    // 目标：去让父级修改dialogVisible值
    // 子组件内: this.$emit('update:num', 100) 格式update:props变量名
      this.$emit('update:dialogVisible', false)
    },
    enterFn() { // 确定
      this.$emit('update:dialogVisible', false)// 弹窗关闭
      this.$emit('departEV', this.form)//
    }
  }
}
</script>

<style lang="scss">
.el-dialog__footer{
  // display: block;

  text-align: center!important;
}

</style>
